<template>
  <div class="flSupplyPump" :style="{ height: (fullHeight-115) + 'px' }">
    <div class="top_title">
      {{ monitorPointObj.name }}
    </div>
    <div class="top_control">
      <div style="margin-left:24px;position:relative;top:3px;" @click="quanpin">
        <img src="../image/sun.png" />
      </div>
      <div class="top_font" style="margin-left:10px;"> 15 °C</div>
      <div class="top_font" style="margin-left:15px;">{{ currentDate }}</div>
      <div class="top_right">
        <div style="position:relative;top:5px">
          <img src="../image/sun.png" />
        </div>
        <div class="top_font" style="margin-left:10px;cursor: pointer;" @click="goBack">退出</div>
      </div>
    </div>
    <div class="moveControl">
      <div>
        <span style="color:white;">移动位置：</span>
        <el-switch v-model="moveDrag" active-color="#07799A" inactive-color="#C80010"></el-switch>
      </div>
      <div style="margin-left:20px;">
        <el-button type="primary" @click="editStyle" size="mini" style="cursor: pointer;">保存布局</el-button>
      </div>
    </div>
    <div class="point">
      <el-select v-model="pointVal" placeholder="请选择" size="small" @change="changePump">
        <el-option v-for="item in monitorPointList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="content">
      <el-row :gutter="24" style="padding:0 45px 0 45px;margin-right:300px;">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <div class="left-content" :style="{ height: (fullHeight-290) + 'px' }">
              <div class="run_box">
                <div class="run_tit">{{runPanelObj.name}}</div>
                <div class="param_line" v-for="(i,index) in runPanelObj.param" :key="index" style="margin-top:6px;">
                  <div style="display:none">{{i.displayName}}</div>
                  <div class="param_name">{{i.displayName==undefined?"":i.displayName}}</div>
                  <div style="display:flex">
                    <div style="display:none">{{i.enName}}</div>
                    <div class="param_val" style="margin-right:20px;cursor: pointer;z-index: 999;" @click="watchTb($event)">
                      {{ i.value }}
                    </div>
                    <div class="param_unit">{{i.unit==undefined?"":i.unit}}</div>
                  </div>
                </div>
              </div>
              <div class="contro_box" style='margin-top:5%;'>
                <div class="contro_tit">{{controPanelObj.name}}</div>
                <div class="param_line" v-for="(i,index) in controPanelObj.param" :key="index" style="margin-top:6px;">
                  <div style="display:none">{{i.displayName}}</div>
                  <div class="param_name">{{i.displayName==undefined?"":i.displayName}}</div>
                  <div v-if="i.type == 1" style="display:flex">
                    <div style="display:none">{{i.enName}}</div>
                    <div class="param_val" style="margin-right:20px;z-index: 999;" @click="watchTb($event)">
                      {{ i.value }}
                    </div>
                    <div class="param_unit">{{i.unit==undefined?"":i.unit}}</div>
                  </div>
                  <div v-if="i.type == 0 && i.enName.indexOf('Reset') ==-1 ">
                    <el-switch v-model="i.index" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                  </div>
                  <div v-if="i.type == 0 && i.enName.indexOf('Reset') !=-1">
                    <el-button type="success" size="mini" @click="handleEdit()" style="padding: 3px 10px;">复位</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="18" style="padding:32px 0px 0px 12%">
          <div class="grid-content bg-purple">
            <div class="center_topLine">
              <div class="box_term" style="padding:15px 0 0 20px">
                <div>
                  <img src="../image/shuiL.png" style="width:35px" />
                </div>
                <div style="margin-left:15px">
                  <div class="box_tit">今日供水量</div>
                  <div><span class="box_count">{{ centerTopObj.outflowTotalToday }}</span><span class="box_unit">m³</span></div>
                </div>
              </div>
              <div class="box_term" style="padding:20px 0 0 25px">
                <div>
                  <img src="../image/dianL.png" style="width:21px" />
                </div>
                <div style="margin-left:15px">
                  <div class="box_tit">今日耗电量</div>
                  <div><span class="box_count">{{ centerTopObj.electricQuantityToday }}</span><span class="box_unit">KWh</span></div>
                </div>
              </div>
              <div class="box_term" style="padding:15px 0 0 20px">
                <div>
                  <img src="../image/dianH.png" style="width:35px" />
                </div>
                <div style="margin-left:15px">
                  <div class="box_tit">吨水电耗</div>
                  <div><span class="box_count">{{ centerTopObj.powerWaterToday }}</span><span class="box_unit">KWh/m³</span></div>
                </div>
              </div>
            </div>
            <div id="center_Line" class="p-event">
              <div>
                <img style="width:93%;height:100%;margin:32px 0 0 4%" :src="monitorPointObj.imagesPath" />
              </div>
              <template v-for="(item, index) in dataAttribute">
                <VueDraggableResizable parent=".p-event" :grid="[10,10]" :x="item.x" :y="item.y" :left="paddingLeft" :key="item+index" :parent="false" w="auto" h="auto" @dragstop="onDragstop" :draggable="moveDrag">
                  <div class="center_box">
                    <div class="param_tit">{{item.name}}</div>
                    <div class="param_line" v-for="(i,index) in item.param" :key="index" style="display:flex">
                      <div style="display:none">{{i.displayName}}</div>
                      <div class="param_name">{{i.displayName.indexOf("#") != -1?i.displayName.slice(3):i.displayName}}</div>
                      <div style="display:none">{{i.enName}}</div>
                      <div class="param_val" style="margin-right:3px;cursor: pointer;" @click="watchTb($event)">
                        {{ i.value }}
                      </div>
                      <div class="param_unit">{{i.unit==undefined?"":i.unit}}</div>
                    </div>
                  </div>
                </VueDraggableResizable>
              </template>
            </div>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <div class="right-content" :style="{ height: (fullHeight-290) + 'px' }">
              <div class="right_box">
                <div class="chart_titlt">能耗分析</div>
                <div>
                  <energyAnalyChart :energyAnalyData="energyAnalyData" />
                </div>
              </div>
              <div class="right_box">
                <div class="chart_titlt">进出水压力</div>
                <div>
                  <outletWaterChart :outletWaterData="outletWaterData" />
                </div>
              </div>
              <div class="right_box">
                <div class="chart_titlt">基础信息</div>
                <div style="margin-top:8px">
                  <div class="moniLine" style="display:flex;">
                    <div class="moniLeft">
                      <div class="moniLabel">
                        站点名称
                      </div>
                      <div class="moniLabel">
                        监测点编号
                      </div>
                      <div class="moniLabel">
                        设备编号
                      </div>
                      <div class="moniLabel">
                        供应商
                      </div>
                      <div class="moniLabel">
                        安装日期
                      </div>
                      <div class="moniLabel">
                        安装位置
                      </div>
                    </div>
                    <div class="moniRight">
                      <div class="moniVal">
                        {{ monitorPointObj.name }}
                      </div>
                      <div class="moniVal">
                        {{ monitorPointObj.monitorPointNo }}
                      </div>
                      <div class="moniVal">
                        22689
                      </div>
                      <div class="moniVal">
                        沣澜科技
                      </div>
                      <div class="moniVal">
                        {{ monitorPointObj.createDate }}
                      </div>
                      <div class="moniVal">
                        {{ monitorPointObj.installAddress }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="图表" :visible.sync="tBVisible" style="margin-top:21vh;margin-left:7.5vw;" width="40%">
      <watchTbChart :watchTbData="watchTbData" :loading="loading" />
      <el-button type="primary" @click="tBVisible = false" size="mini" style="position:absolute;right:20px;bottom:20px">确 定</el-button>
    </el-dialog>
  </div>
</template>
<script>
import energyAnalyChart from "./../components/energyAnalyChart";
import outletWaterChart from "./../components/outletWaterChart";
import watchTbChart from "./../components/watchTbChart";
import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue';
import {
  searchAllFlParamZone, //分页查询
  modifyFlParamZone,//修改参数分区
} from "@/api/schedule/base/FlParamZone/index";
import {
  assflParam, //增加
} from "@/api/schedule/base/flParam/index";
import {
  getTodayOutflowElectric, //获取今日供水量、今日耗电量、吨水电耗
  searchFlExpendOutput, //能耗分析
  searchFlReportData,//出水压力
  searchFlMonitorPoint,//基本信息
  getRealtimeReportData, //查询最新一条推送数据
} from "@/api/schedule/base/flSupplyPump/index";
import {
  getToken
} from "utils/auth";
import {
  searchflPumpMonitorPoint, //泵房查询
} from "@/api/schedule/base/flOverviewPump/index";
export default {
  components: {
    energyAnalyChart,
    outletWaterChart,
    VueDraggableResizable,
    watchTbChart
  },
  data () {
    return {
      tBVisible: false,
      centerTopObj: {
        outflowTotalToday: "",
        electricQuantityToday: "",
        powerWaterToday: ""
      },
      moveDrag: false,
      drag: false,
      switchA: "",
      fullHeight: window.innerHeight,
      yunXingData: [{
        date: '今日供水量',
        name: '0.22',
        address: 'm'
      }, {
        date: '今日供水量',
        name: '0.22',
        address: 'm'
      }, {
        date: '今日供水量',
        name: '0.22',
        address: 'm'
      }],
      kongZhiData: [{
        date: '今日供水量',
        name: '',
        address: 'm'
      }, {
        date: '今日供水量',
        name: '',
        address: 'm'
      }, {
        date: '今日供水量',
        name: '',
        address: 'm'
      }],
      energyAnalyData: {
        createDateList: [],
        electricQuantityList: [],
        outflowTotalList: [],
        doseList: []
      },
      outletWaterData: {
        createDateList: [],
        outPressureObj: {}
      },
      monitorPointObj: {},
      imagesPath: "",
      //拖曳
      paddingLeft: 0,
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      sizeList: [], // 字体号数组
      apiArr: [ // 后期从接口中获取name集合
        { name: '公司名称' },
        { name: '抬头' },
        { name: '公司简介' }
      ],
      list: [], // apiArr带上所有属性的集合
      dataAttribute: [],
      runPanelObj: {},
      controPanelObj: {},
      currentDate: "",
      paramData: {},
      reportDataList: [],
      watchTbData: {
        dateList: [],
        paramDataList: [],
        paramName: ''
      },
      loading: true,
      monitorPointList: [],
      pointVal: ""
    }
  },
  mounted () {
    this.getPumpMonitorPoint()
    let date = new Date();
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    if (month < 10) {
      month = "0" + month
    }
    let day = date.getDate()
    if (day < 10) {
      day = "0" + day
    }
    let hours = date.getHours()
    if (hours < 10) {
      hours = "0" + hours
    }
    let Minutes = date.getMinutes()
    if (Minutes < 10) {
      Minutes = "0" + Minutes
    }
    this.currentDate = year + "-" + month + "-" + day + " " + hours + ":" + Minutes
    this.initWebsocket()
  },
  methods: {
    getPumpMonitorPoint () {
      let obj = { type: 2 }
      searchflPumpMonitorPoint(obj).then(response => {
        this.monitorPointList = response.data
        if (this.$route.query.id) {
          this.pointVal = this.$route.query.id
        } else {
          this.pointVal = response.data[0].id
        }
        this.handleParam(this.pointVal)
        this.handleTodayOutflowElectric(this.pointVal)
        this.handleSearchFlExpendOutput(this.pointVal)
        this.handleSearchFlReportData(this.pointVal)
        this.handleSearchFlMonitorPoint(this.pointVal)
      }).catch();
    },
    changePump (e) {
      this.pointVal = e
      this.handleParam(this.pointVal)
      this.handleTodayOutflowElectric(this.pointVal)
      this.handleSearchFlExpendOutput(this.pointVal)
      this.handleSearchFlReportData(this.pointVal)
      this.handleSearchFlMonitorPoint(this.pointVal)
    },
    quanpin () {
      this.requestFullScreen(document.documentElement);
      let doc = document.getElementsByClassName('flSupplyPump')[0]
      doc.style.position = 'fixed'
      doc.style.left = 0
      doc.style.top = 0
      doc.style.width = '100vw',
        doc.style.height = '100vh'
      // doc.style.z-index = '999'
    },
    watchTb (e) {
      this.tBVisible = true
      let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      let paramCN = e.currentTarget.parentElement.firstElementChild.innerText
      let paramName = e.currentTarget.previousElementSibling.innerText
      if (reg.test(paramCN)) {
        paramCN = paramCN
      } else {
        paramCN = e.currentTarget.parentElement.parentElement.firstElementChild.innerText
      }
      let pointId
      if (this.$route.query.id) {
        pointId = this.$route.query.id
      } else {
        pointId = this.pointVal
      }
      let obj = {
        monitorPointId: pointId,
        type: 2
      }
      if (this.reportDataList.length != 0) {
        let dateArray = []
        let paramDataArray = []
        this.reportDataList.map(item => {
          dateArray.push(item.createDate.slice(11))
          paramDataArray.push(item[paramName])
        })
        this.watchTbData.dateList = dateArray
        this.watchTbData.paramDataList = paramDataArray
        this.watchTbData.paramName = paramCN
      } else {
        searchFlReportData(obj).then(response => {
          let dateArray = []
          let paramDataArray = []
          this.reportDataList = response.data
          this.loading = false
          console.log(this.reportDataList)
          debugger
          this.reportDataList.map(item => {
            dateArray.push(item.createDate.slice(11))
            paramDataArray.push(item[paramName])
          })
          this.watchTbData.dateList = dateArray
          this.watchTbData.paramDataList = paramDataArray
          this.watchTbData.paramName = paramCN
        }).catch()
      }
    },
    requestFullScreen (element) {
      var requestMethod = element.requestFullScreen || //W3C
        element.webkitRequestFullScreen || //Chrome
        element.mozRequestFullScreen || //FireFox
        element.msRequestFullScreen; //IE11
      if (requestMethod) {
        requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    editStyle () {
      this.dataAttribute.map(item => {
        let id = item.id
        let obj = {
          x: item.x,
          y: item.y
        }
        modifyFlParamZone(id, obj).then(response => {
          this.$message.success(response)
        }).catch()
      })
    },
    onDragstop (x, y) {
      var paramName = document.getElementsByClassName('active')[0].lastChild.childNodes[0].innerText
      this.dataAttribute.map(item => {
        if (item.name == paramName) {
          item.x = x
          item.y = y
        }
      })
    },
    goBack () {
      this.$router.go(-1);
    },
    initWebsocket () {
      let socket = new WebSocket("ws://" + "140.249.214.1:9905" + "/socketServer/" + "reportData" + '?token=' + getToken())
      socket.onopen = () => {
        console.log('实时报警已连接', "111111");
      }
      socket.onmessage = (e) => {
        console.log(e.data)
        debugger;
        let obj = JSON.parse(e.data)
        this.getFlParamZone(this.pointVal, this.paramData, obj)
      }
      socket.onclose = () => {
        console.log('服务器已经断开');
        this.reconnect();
      }
    },
    reconnect () {
      let that = this
      if (that.limitConnect > 0) {
        that.limitConnect--;
        that.timeConnect++;
        console.log('第' + that.timeConnect + '次重连');
        setTimeout(function () {
          that.initWebsocket();
        }, 2000)
      } else {
        console.log('TCP连接已超时');
      }
    },
    handleParam (id) {
      assflParam().then(response => {
        this.paramData = response.data
        let reportObj = {
          monitorPointId: id,
          type: 2
        }
        getRealtimeReportData(reportObj).then(response => {
          let obj = response.data[0]
          this.centerTopObj.outflowTotalToday = response.data[0].outflowTotalToday
          this.centerTopObj.electricQuantityToday = response.data[0].electricQuantityToday
          this.centerTopObj.powerWaterToday = response.data[0].electricQuantityToday / response.data[0].outflowTotalToday
          this.getFlParamZone(id, this.paramData, obj)
        })
      }).catch();
    },
    //获取今日供水量、今日耗电量、吨水电耗
    handleTodayOutflowElectric (id) {
      let obj = {
        monitorPointId: id,
        type: 2
      }
      getTodayOutflowElectric(obj).then(response => {
        let todayOutflowElectricData = response.data
        console.log(todayOutflowElectricData)
      }).catch();
    },
    //能耗分析
    handleSearchFlExpendOutput (id) {
      let obj = {
        monitorPointId: id,
        type: 2
      }
      let expendOutputData
      searchFlExpendOutput(obj).then(response => {
        expendOutputData = response.data
        let createDateArray = [];
        let electricQuantityArray = [];
        let outflowTotalArray = [];
        let doseArray = [];
        expendOutputData.map(item => {
          createDateArray.push(item.createDate.slice(11))
          electricQuantityArray.push(item.electricQuantity)
          outflowTotalArray.push(item.outflowTotal)
          doseArray.push(item.dose)
        })
        this.energyAnalyData.createDateList = createDateArray
        this.energyAnalyData.electricQuantityList = electricQuantityArray
        this.energyAnalyData.outflowTotalList = outflowTotalArray
        this.energyAnalyData.doseList = doseArray
      }).catch();
    },
    // 说明：出水压力
    handleSearchFlReportData (id) {
      let obj = {
        monitorPointId: id,
        type: 2
      }
      let flReportData
      searchFlReportData(obj).then(response => {
        flReportData = response.data
        let createDateArray = []
        let outPressureArray = []
        let pumpParamObjList = []
        let pimpParamobj = {}
        flReportData.map(item => {
          createDateArray.push(item.createDate.slice(11))
          let allParamNameList = Object.entries(item)
          let pumpParamNameList = []
          allParamNameList.map(it => {
            if (it[0].search("Pressure") != -1) {
              pumpParamNameList.push(it)
            }
          })
          let obj = {}
          pumpParamNameList.map(i => {
            obj[i[0]] = i[1]
          })
          pumpParamObjList.push(obj)
          outPressureArray.push(item.outPressure)
        })
        let Nlist = Object.keys(pumpParamObjList[0])
        Nlist.map(it => {
          pimpParamobj[it] = []
        })
        pumpParamObjList.map(item => {
          let aList = Object.keys(item)
          aList.map(it => {
            Nlist.map(i => {
              if (it == i) {
                pimpParamobj[i].push(item[i])
              }
            })
          })
        })
        this.outletWaterData.createDateList = createDateArray
        this.outletWaterData.outPressureObj = pimpParamobj
      }).catch();
    },
    // 说明：基本信息
    handleSearchFlMonitorPoint (id) {
      searchFlMonitorPoint(id).then(response => {
        this.monitorPointObj = response.data
        this.monitorPointObj.imagesPath = "https://test.fenglankeji.cn/" + response.data.imagesPath
      })
    },
    getFlParamZone (id, paramData, socketData) {
      let searchData = { monitorPointId: id }
      searchAllFlParamZone(searchData).then(response => {
        this.dataAttribute = response.data;
        this.dataAttribute.map(item => {
          if (item.param) {
            let paramList = item.param.split(",")
            let Data = paramList.map(
              it => paramData.filter(i => i.id == it)[0]
            );
            Data.map(item => {
              if (Object.keys(socketData).includes(item.enName)) {
                item.value = socketData[item.enName]
              } else {
                item.value = "0.00"
              }
            })
            item.param = Data
          }
          // if (item.x) {
          //   item.x = item.x
          // } else {
          //   item.x = Math.floor(Math.random() * (800 - 10)) + 10
          // }
          // if (item.y) {
          //   item.y = item.y
          // } else {
          //   item.y = Math.floor(Math.random() * (800 - 10)) + 10
          // }
        })
        this.dataAttribute.map(item => {
          if (item.name == "运行参数") {
            this.runPanelObj = item
          }
          if (item.name == "控制面板") {
            this.controPanelObj = item
          }
          item.param = item.param.filter(res => { return res != undefined })
        })
        this.dataAttribute = this.dataAttribute.filter(function (item) {
          return item.name != "运行参数" && item.name != "控制面板"
        });
        console.log(this.dataAttribute)
      }).catch(
      );
    }
  }
}
</script>
<style lang="scss" scoped>
.flSupplyPump {
  overflow: hidden;
  background: url("../image/bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  /deep/ .el-dialog__body {
    height: 300px !important;
  }
}
.top_title {
  position: absolute;
  top: 30px;
  height: 56px;
  width: 100%;
  text-align: center;
  font-size: 58px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #ffffff;
  line-height: 48px;
  letter-spacing: 6px;
  background: linear-gradient(360deg, #01c2ce 0%, #5fe1f0 50%, #00b9c5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top_control {
  width: 100%;
  height: 120px;
  display: flex;
  position: relative;
  padding-top: 15px;
  background: url("../image/top_bg.png") no-repeat;
  background-size: 100% 100%;
}
.top_right {
  position: absolute;
  right: 21px;
  display: flex;
}
.top_font {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a4a5a6;
  line-height: 36px;
}
.table_title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-left: 24px;
}
.left-content {
  /* width: 351px; */
  width: 185%;
  padding: 18px 32px 32px 24px;
  background: url("../image/left_content.png") no-repeat;
  background-size: 100% 100%;
}
.right-content {
  /* width: 351px; */
  width: 450%;
  padding: 18px 0 32px 4%;
  background: url("../image/right_content.png") no-repeat;
  background-size: 100% 100%;
  /* margin-left:120px; */
}
.center_topLine {
  display: flex;
  justify-content: space-around;
}
.box_term {
  background: url("../image/box_bg.png") no-repeat;
  background-size: 100% 100%;
  width: 230px;
  height: 80px;
  display: flex;
}
.box_tit {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #00f1ff;
}
.box_count {
  font-size: 20px;
  font-family: AvenirNext-DemiBold, AvenirNext;
  font-weight: 600;
  color: #53f102;
}
.box_unit {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-left: 20px;
}
.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
}
.el-table td,
.el-table th.is-leaf {
  border-style: transparent !important;
}
.chart_titlt {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  padding-left: 30px;
}
.el-descriptions-item__label.is-bordered-label {
  background-color: transparent !important;
}
.el-descriptions__body {
  background-color: transparent !important;
}
.right_box {
  margin-top: 10px;
}
/* 拖曳 */
#center_Line {
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-between;
}
.vdr {
  border: none;
}
.handle,
.active.vdr {
  border: 1px dashed #000;
}
/*  */
.center_box {
  width: 137px;
  background: url("../image/csNsj.png") no-repeat;
  background-size: 100% 100%;
  padding: 8px 10px 16px;
  cursor: move;
}
/*选中样式*/
.chosen {
  border: solid 2px #3089dc !important;
}
.param_line {
  display: flex;
  justify-content: space-between;
}
.param_name {
  font-size: 14px;
  color: #ffffff;
}
.param_val {
  font-size: 14px;
  color: #53f102;
}
.param_unit {
  font-size: 14px;
  color: #ffffff;
}
.left_line {
  margin-top: 5px;
  display: flex;
  justify-content: space-around;
}
.param_tit {
  padding-bottom: 5px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #06edfc;
}
.run_tit {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  padding-bottom: 5px;
}
.contro_tit {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  padding-bottom: 5px;
}
.moveControl {
  position: absolute;
  z-index: 999;
  left: 45px;
  top: 80px;
  display: flex;
}
.point {
  position: absolute;
  z-index: 999;
  right: 45px;
  top: 80px;
}
.moniLeft {
  width: 95px;
  text-align: right;
}
.moniRight {
  margin-left: 50px;
}
.moniLabel {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e4e4e4;
  margin-top: 8px;
}
.moniVal {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  margin-top: 8px;
}
</style>